<template>
	<view class="w-1 p-r-30">
		<view class="w-1">
			<view class="comment-item w-1 fl-s-s">
				<!-- 头像 星级 时间 -->
				<view class="fr-s-c w-1">
					<image :src="info.avatar" mode="aspectFill" class="circle" style="width: 56rpx; height: 56rpx;"></image>
					<view class="flex-1 fl-c-s m-l-20">
						<view class="fr-b-c w-1 fm-ali" >
							<text class="fs-20 c-66">{{info.nickname}}</text>
							<text class="fs-22 c-99">{{info.creattime}}</text>
						</view>
						<view class="fr-s-c" style="margin-top: 5rpx;">
							<image v-for="item in info.star_level" :key="this" class="m-r-10" src="/static/images/home/comment_stars.png" style="width: 19rpx; height: 19rpx;"></image>
							<image v-for="item in (5-info.star_level)" :key="this"  class="m-r-10" src="/static/images/home/comment_star.png" style="width: 19rpx; height: 19rpx;"></image>
						</view>
					</view>
				</view>
				<!-- 文字内容 -->
				<text style="word-break: break-all;" class="m-t-30 fs-26 c-66 fm-ali">{{info.content}}</text>
				<!-- 图片 -->
				<view class="fr-s-s w-1 m-t-30" style="flex-wrap: wrap;">
					<image :src="item" v-for="(item,index) in info.imgs" :key="index" mode="aspectFill" class="comment-image"></image>
				</view>
				<!-- 回复区 -->
				<view class="reply-box w-1 m-t-20" v-if="info.reply.length">
					<view class="fr-s-s" v-for="(item,index) in info.replay" :key="index">
						<text class="c-33 fm-ali fs-24">{{item.user.nickname}}回复：<text class="c-99 fm-ali fs-24">{{item.content}}</text></text>
						<!-- c-faa -->
					</view>
					<!-- <view class="fr-s-s m-t-20">
						<text class="c-33 fm-ali fs-24">用户回复：<text class="c-99 fm-ali fs-24">好用吗，好用我就下单了</text></text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="reply-commnet fr-s-c">
			<input class="input-reply flex-1" v-model="content" type="text" cursor-spacing="20" placeholder="给评论写条回复吧~" placeholder-style="color: #949494;" />
			<view class="reply-btn fr-c" @click="subReply">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				content:''
			}
		},
		onLoad(e) {
			this.info = JSON.parse(decodeURIComponent(e.info))
			console.log(this.info)
		},
		methods: {
			subReply(){
				if(!this.content) return this.$u.toast('请输入回复内容');
				this.$post({
					url:"/homepage/reply",
					data:{
						access_token:uni.getStorageSync('access_token'),
						content:this.content,
						evaluate_id:this.info.id
					}
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						mask:true
					})
					this.info.replay.unshift({
						content:this.content,
						user:{nickname:uni.getStorageSync('nickname')}
					})
					this.content = ''
				})
			}
		}
	}
</script>

<style>
.comment-item{
	padding: 28rpx 0;
	border-bottom: 2rpx solid #F4F4F4;
}
.comment-image{
	width: 164rpx;
	height: 166rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
.reply-box{
	background: #F4F4F4;
	border-radius: 16rpx;
	padding: 28rpx 32rpx;
}
.reply-commnet{
	position: fixed;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 40rpx;
	width: 686rpx;
	height: 68rpx;
	border-radius: 33rpx;
	overflow: hidden;
	background-color: #f4f4f4;
}
.input-reply{
	font-size: 26rpx;
	font-family: Alibaba;
	color: #949494;
	padding-left: 44rpx;
}
.reply-btn{
	margin-left: 20rpx;
	width: 118rpx;
	height: 68rpx;
	background: #FA360A;
	border-radius: 33rpx;
	font-size: 26rpx;
	font-family: Alibaba;
	color: #FFFFFF;
}
</style>
